<!--  逻辑代码 写 函数 定义数据-->
<script setup lang="ts"> 
// 定义数据
// 函数
const getData=()=>{
  return '666'
}
// 布尔值
const male=false
// 对象
const dog={
  name:"tom",
  color:"RED",
  age:18,
  bark(){
    return "今年"+this.age
  }
}

 // 1. 定义事件处理函数
 const clickBtn = () => {
   alert('点我干嘛?')
 }
</script>
<!-- 结构 -->
<template>
  <div>{{ male?"男":"女" }}</div>
  <div>{{ getData() }}</div>
  <span>
    <h1>{{ dog.bark() }}</h1>
    <h1>{{ dog.age }}</h1>
  </span>
  <div>
    <!-- 函数名 clickBtn  具体函数定义在 script -->
    <!-- @事件名 -->
    <button @click="clickBtn">点我一下</button>
  </div>
</template>
<!-- 样式 -->
<style scoped>
div{
  background-color: aquamarine;
}
h1{
  background-color: bisque;
}
</style>
